<template>
  <div id="app">
    <transition>
      <Tabbar id="tab-bar" v-show="Nav"></Tabbar>
    </transition>

    <transition :name="aniType">
      <router-view></router-view>
    </transition>
    <!--<router-view/>-->

    <Nav></Nav>
  </div>
</template>

<script>
  import Nav from '@/components/NavBar.vue'
  import { mapState } from 'vuex';
  export default {
    data: function () {
      return {
        aniType: "",
      }
    },
    computed: {
      ...mapState([
        "islogin",
        "userinfo"
      ]),
      Nav: function () {
        var deep = this.$route.path.split("/").length - 1;
        return deep == 1;
      },


    },
    mounted: function () {
      this.http.post("/api/users/islogin")
        .then(res => {
          if (!res.data.err) {
            this.$store.commit("setLogin", true);
            this.$store.commit("setUserinfo", res.data.userInfo)
          } else {
            this.$store.commit("setLogin", false);
          }
        })
    },


    components: {
      Nav,

    },
    watch: {
      $route: function (nv, ov) {
        this.http.post("/api/users/islogin")
          .then(res => {
            if (!res.data.err) {
              this.$store.commit("setLogin", true);
              this.$store.commit("setUserinfo", res.data.userInfo)
            } else {
              this.$store.commit("setLogin", false);
            }
          })
        var nDeep = nv.path.split("/").length - 1;
        var oDeep = ov.path.split("/").length - 1;
        if (nDeep > oDeep) {
          this.aniType = "pagein";
          // console.log(this.aniType)
        } else if (nDeep < oDeep) {
          this.aniType = "pageout";
        } else {
          this.aniType = "";
        }
        //  console.log(this.aniType)
      }

    },


  }

</script>

<style>

.pagein-enter{
    transform: translate(100%,0);
}
.pagein-enter-active,.pagein-leave-active{
    transition: all 0.7s;
    position: absolute;
    width: 100%;
    /*overflow: hidden;*/
}
.pagein-enter-to{
    transform: translate(0,0);
}
.pagein-leave{
    transform: translate(0,0);
}
.pagein-leave-to{
    transform: translate(-30%,0);
}


.pageout-enter{
    transform: translate(-100%,0);
}
.pageout-enter-active,.pageout-leave-active{
    transition: all 0.7s;
    position: absolute;
    width: 100%;
    z-index: 100;
}
.pageout-enter-to{
    transform: translate(0,0);
}
.pageout-leave{
    transform: translate(0,0);
}
.pageout-leave-to{
    transform: translate(30%,0);
    
}
</style>